<template>
  <FilterGroup ref="filterGroup" :tags="tags" :filters.sync="filters" @onCloseTag="handleCloseTag">
    <FilterItem
      :show-all="false"
      :data-obj="resourceTypeFilterData"
      :checked-nodes.sync="resourceType"
      :default-active="['Land']"
    />
    <FilterItem :data-count="10" :data-obj="cityFilterData" :checked-nodes.sync="belongDistrict" />

    <!-- 土地 -->
    <FilterItem
      v-if="isTypeShow('Land')"
      :data-obj="landTypeFilterData"
      :checked-nodes.sync="type"
    />
    <FilterItem
      v-if="isTypeShow('Land')"
      :data-obj="sellTypeFilterData"
      :checked-nodes.sync="sellType"
    />
    <FilterItem
      v-if="isTypeShow('Land')"
      :data-obj="landAreaFilterData"
      :checked-nodes.sync="area"
    />
    <FilterItem
      v-if="isTypeShow('Land')"
      :data-obj="landPriceFilterData"
      :checked-nodes.sync="price"
    />
    <!-- 写字楼 -->
    <FilterItem
      v-if="isTypeShow(['Building', 'Workshop', 'Depository', 'Shop'])"
      :data-obj="rentOrSaleFilterData"
      :checked-nodes.sync="rentOrSale"
    />
    <FilterItem
      v-if="isTypeShow('Building')"
      :data-obj="buildingAreaFilterData"
      :checked-nodes.sync="buildingArea"
    />
    <FilterItem
      v-if="isTypeShow('Building') && showPriceRent('Price')"
      :data-count="5"
      :data-obj="buildingPriceFilterData"
      :checked-nodes.sync="price"
    />
    <FilterItem
      v-if="isTypeShow('Building') && showPriceRent('Rent')"
      :data-count="5"
      :data-obj="buildingRentFilterData"
      :checked-nodes.sync="rent"
    />
  </FilterGroup>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import FilterGroup from '@/components/portal/FilterGroup.vue'
import FilterItem from '@/components/portal/FilterItem.vue'
export default Vue.extend({
  components: { FilterItem, FilterGroup },
  props: {
    checked: {
      type: Array,
      default: () => [],
    },
    resourceName: {
      type: String,
      default: 'Land',
    },
  },
  data() {
    return {
      resourceType: {
        label: '载体资源',
        checked: [
          {
            label: '土地',
            value: 'Land',
          },
        ],
      },
      belongDistrict: { label: '所在城市', checked: [] },
      type: { label: '土地类型', checked: [] },
      sellType: { label: '出让方式', checked: [] },
      area: { label: '土地面积', checked: [] },
      price: { label: '土地单价', checked: [] },
      rent: { label: '楼宇租金', checked: [] },
      rentOrSale: { label: '租售类型', checked: [] },
      buildingArea: { label: '楼宇面积', checked: [] },
      filters: [],
    }
  },
  computed: {
    ...mapGetters('tree', ['city']),
    ...mapGetters('dictionary', ['codes']),

    resourceTypeFilterData() {
      return {
        label: '载体资源',
        key: 'resourceType',
        checked: [],
        filterNames: [
          {
            label: '土地',
            value: 'Land',
          },
          {
            label: '写字楼',
            value: 'Building',
          },
          {
            label: '厂房',
            value: 'Workshop',
          },
          {
            label: '仓库',
            value: 'Depository',
          },
          {
            label: '商铺',
            value: 'Shop',
          },
        ],
      }
    },
    cityFilterData() {
      return {
        label: '所在城市',
        key: 'belongDistrict',
        checked: [],
        filterNames: this.city,
      }
    },
    landTypeFilterData() {
      return {
        label: '土地类型',
        key: 'type',
        checked: [],
        filterNames: this.codes.land_type,
      }
    },
    sellTypeFilterData() {
      return {
        label: '出让方式',
        key: 'sellType',
        checked: [],
        filterNames: this.codes.sell_type,
      }
    },
    landAreaFilterData() {
      return {
        label: '土地面积',
        key: 'area',
        checked: [],
        filterNames: this.codes.land_area_range,
      }
    },
    landPriceFilterData() {
      return {
        label: '土地单价',
        key: 'price',
        checked: [],
        filterNames: this.codes.land_price_range,
      }
    },
    rentOrSaleFilterData() {
      return {
        label: '租售类型',
        key: 'rentOrSale',
        checked: [],
        filterNames: this.codes.rent_or_sale,
      }
    },
    buildingAreaFilterData() {
      return {
        label: '楼宇面积',
        key: 'buildingArea',
        checked: [],
        filterNames: this.codes.building_area_range,
      }
    },
    buildingPriceFilterData() {
      return {
        label: '楼宇单价',
        key: 'price',
        checked: [],
        filterNames: this.codes.building_price_range,
      }
    },
    buildingRentFilterData() {
      return {
        label: '楼宇租金',
        key: 'rent',
        checked: [],
        filterNames: this.codes.building_rent_range,
      }
    },
    tags: {
      get() {
        return [
          this.belongDistrict,
          this.type,
          this.sellType,
          this.area,
          this.price,
          this.rent,
          this.rentOrSale,
          this.buildingArea,
        ]
      },
    },
  },

  watch: {
    filters(val) {
      this.$emit('update:checked', val)
    },
    resourceType(type) {
      console.log('resourceType', type)
      const name = type.checked[0].value
      this.$emit('update:resourceName', name)
      this.handleClear()
    },
  },
  methods: {
    isTypeShow(type) {
      if (Array.isArray(type)) {
        return type.includes(this.resourceType.checked[0].value)
      }
      return this.resourceType.checked[0].value === type
    },
    showPriceRent(key) {
      console.log(key)

      const checked = this.rentOrSale.checked
      if (checked.length === 0) {
        return true
      } else if (checked[0].value === '1' && key === 'Rent') {
        return true
      } else if (checked[0].value === '2' && key === 'Price') {
        return true
      }
      return false
    },
    handleClear() {
      this.tags.forEach((tag) => {
        this.handleCloseTag(tag)
      })
    },
    handleCloseTag(tag) {
      this[tag.key] = {
        label: tag.label,
        checked: [],
      }
    },
  },
})
</script>
<style lang="scss" scoped></style>
